<template>
  <div>
    <!-- 头部 -->
    <van-row>
      <van-col span="8">
        <van-icon name="checked" />
        <p>30天无忧退货</p>
      </van-col>
      <van-col span="8">
        <van-icon name="checked" />
        <p>48小时快速退货</p>
      </van-col>
      <van-col span="8">
        <van-icon name="checked" />
        <p>满88元免邮费</p>
      </van-col>
    </van-row>
    <!-- 如果没加入商品 显示购物车为空 -->
    <!-- <van-empty
      description="购物车为空"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      image-size="190"
    /> -->
    <!-- 加入购物车的商品 -->
    <van-checkbox-group
      v-model="result"
      v-for="v in cartList"
      :key="v.goods_id"
    >
      <van-checkbox :name="v.id" @click="changeChecked(v)">
        <van-swipe-cell>
          <van-card
            :num="v.number"
            :price="v.retail_price.toFixed(2) + '元'"
            :title="v.goods_name"
            :thumb="v.list_pic_url"
            style="background: "
          />
          <!-- 商品删除 -->
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delGoods(v.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
      <!-- 商品步进器 -->
      <div class="bujinqi" v-show="!isEdit">
        <van-stepper
          v-model="v.number"
          style="text-align: right"
          @change="onChange(v.goods_id, v.id, v.number, v.product_id)"
          min="1"
          max="100"
        />
      </div>
    </van-checkbox-group>

    <!-- 底部购物车栏 -->
    <div>
      <van-submit-bar
        :price="cartTotal.checkedGoodsAmount * 100"
        button-text="立即购买"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checkedAll">全选</van-checkbox>
        <template #tip>
          累计共<span>{{cartTotal.checkedGoodsCount}}</span
          >件商品,可点击
          <van-button
            :type="isEdit ? 'primary' : 'danger'"
            @click="editBtn()"
            >{{ isEdit ? "编辑" : "编辑完成" }}</van-button
          >
          按钮进行商品数量修改
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import {
  GetCarData,
  GetGoodsChecked,
  GetDeleteGoods,
  GetStepUpdate,
} from "@/request/api";
import { Toast } from "vant";
export default {
  data() {
    return {
      // value: 1,
      isEdit: true,
      // 控制是否全选
      // checked: 0,
      // 单选
      result: [],
      cartList: "",
      cartTotal: "",
    };
  },
  methods: {
    //商品 选中状态改变
    changeChecked(v) {
      GetGoodsChecked({
        isChecked: v.checked == 0 ? 1 : 0,
        productIds: v.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          console.log(res);
          this.cartList = res.data.cartList;
          this.cartTotal = res.data.cartTotal;
          // 清空数组
          this.result = [];
          this.cartList.map((item) => {
            item.checked == 1 ? this.result.push(item.id) : "";
          });
        }
      });
    },
    // 编辑按钮
    editBtn() {
      this.isEdit = !this.isEdit;
    },
    //提交订单按钮
    onSubmit() {
      Toast("该功能暂未开放");
    },
    // 商品步进器
    onChange(a, b, c, d) {
      // console.log(a, b, c, d);
      GetStepUpdate({
        goodsId: a,
        id: b,
        number: c,
        productId: d,
      }).then((res) => {
        console.log(res);
        this.cartList = res.data.cartList;
        this.cartTotal = res.data.cartTotal;
      });
    },
    //删除商品
    delGoods(v) {
      // alert('123')
      GetDeleteGoods({ productIds: v.toString() }).then((res) => {
        if (res.errno == 0) {
          Toast.loading({
            message: "删除成功",
            forbidClick: true,
          });
        }
        history.go(0);
      });
    },
  },
  computed: {
    // 全选按钮
    checkedAll: {
      get() {
        return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount;
      },
      set(val) {
        // val即将要修改成的新的值
        // 处理id数组
        let arr = [];
        this.cartList.map((item) => {
          arr.push(item.product_id);
        });
        GetGoodsChecked({
          isChecked: val ? 1 : 0,
          productIds: arr.join(),
        }).then((res) => {
          if (res.errno == 0) {
            console.log(res);
            this.cartList = res.data.cartList;
            this.cartTotal = res.data.cartTotal;
            // 清空数组
            this.result = [];
            this.cartList.map((item) => {
              item.checked == 1 ? this.result.push(item.id) : "";
            });
          }
        });
      },
    },
  },
  // 获取数据
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      GetCarData().then((res) => {
        console.log(res);
        this.cartList = res.data.cartList;
        this.cartTotal = res.data.cartTotal;
        // 清空数组
        this.result = [];
        this.cartList.map((item) => {
          item.checked == 1 ? this.result.push(item.id) : "";
        });
      });
    } else {
      Toast.loading({
        message: "请先登录",
        forbidClick: true,
      });
      this.$router.push("/my");
    }
  },
  components: {},
};
</script>

<style lang="less" scoped>
// 头部  无忧退换
.van-col {
  height: 0.28rem;
  line-height: 0.28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
  .van-icon {
    color: #8b0000;
  }
}
// 商品复选框
/deep/.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background: #fff;
  .van-checkbox {
    padding: 0.1rem 0.15rem;
  }
}
// 订单提交按钮
.van-submit-bar {
  margin-bottom: 0.51rem;
  border-bottom: #999;
}
// 右侧删除按钮
.delete-button {
  height: 100%;
}
// 商品信息
.van-checkbox-group {
  width: 100%;
  // height: 1.2rem;
}
//商品文字大小
.van-card__title {
  height: 0.16rem;
  font-size: 0.16rem;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.bujinqi {
  background-color: #fff;
}
</style>
